<div class="margin10" fxLayout="row" fxLayoutAlign="space-between center">
  <div fxLayout="row"  fxLayoutAlign="flex-start center">
      <a mat-button routerLink="../list/{{currentJobQueueTab}}">
        <mat-icon>arrow_back</mat-icon>
      </a>
      <h4 appHelpElement="JobQueue" subSection="Detail">Job Queue</h4>
  </div>
  <div class="action-buttons">
    <button mat-raised-button routerLink="logs" appHelpElement="JobQueue" subSection="Logs">View Logs</button>
    <button mat-raised-button color="accent" (click)="onCancelClick()" *ngIf="allowCancel">Cancel</button>
    <button mat-raised-button color="primary" (click)="onRestartClick()" *ngIf="allowRestart">{{restartButtonText || 'Restart'}}</button>

    <button mat-raised-button (click)="getJobQueue()" *ngIf="allowRefresh">
      <mat-icon>refresh</mat-icon>
    </button>
  </div>
</div>
<div fxLayout="column" class="job-detail">
  <div fxLayout="row">
    <div fxFlex="10" fxFlex.sm="30" fxFlex.xs="40">Id</div>
    <div>{{jobQueue?.id}}</div>
  </div>
  <mat-divider></mat-divider>
  <div fxLayout="row">
    <div fxFlex="10" fxFlex.sm="30" fxFlex.xs="40">Code</div>
    <div>{{jobQueue?.code}}</div>
  </div>
  <mat-divider></mat-divider>
  <div fxLayout="row">
    <div fxFlex="10" fxFlex.sm="30" fxFlex.xs="40">Job Definition</div>
    <div>{{jobQueue?.jobDefinitionName}}</div>
  </div>
  <mat-divider></mat-divider>
  <div fxLayout="row" fxLayoutAlign="flex-start center">
    <div fxFlex="10" fxFlex.sm="30" fxFlex.xs="40">Status</div>
    <app-job-queue-status [status]="jobQueue?.status"></app-job-queue-status>
  </div>
  <mat-divider></mat-divider>
  <div fxLayout="row">
    <div fxFlex="10" fxFlex.sm="30" fxFlex.xs="40">Engine</div>
    <div>{{jobQueue?.catapultEngineId}}</div>
  </div>
  <mat-divider></mat-divider>
  <div fxLayout="row">
    <div fxFlex="10" fxFlex.sm="30" fxFlex.xs="40">Job Type</div>
    <div>{{jobQueue?.jobType}}</div>
  </div>
  <mat-divider></mat-divider>
  <div fxLayout="row">
    <div fxFlex="10" fxFlex.sm="30" fxFlex.xs="40">Origin Url</div>
    <div>{{jobQueue?.originUrl}}</div>
  </div>
  <mat-divider></mat-divider>
  <div fxLayout="row">
    <div fxFlex="10" fxFlex.sm="30" fxFlex.xs="40">Remarks</div>
    <div>{{jobQueue?.remarks}}</div>
  </div>
  <mat-divider></mat-divider>
</div>
<div class="job-task-status" *ngIf="jobQueue?.jobTasksStatus && jobQueue.jobTasksStatus.length > 0">
    <h5>Job Task Status</h5>
    <div fxLayout="column" class="job-detail">
        <div *ngFor="let taskStatus of jobQueue.jobTasksStatus">
            <div fxLayout="row" fxLayoutAlign="space-between center" class="task-status-item">
                <div fxLayout="column">
                    <h5>{{taskStatus.sequence}}. {{taskStatus.taskName}}</h5>
                </div>
                <app-job-queue-task-status [taskStatus]="taskStatus.status"></app-job-queue-task-status>
              </div>
              <div class="remarks">{{taskStatus.remarks}}</div>
              <div class="margin10"></div>
            <mat-divider></mat-divider>
        </div>
    </div>
</div>
